<template>
  <div class="loginBox">
    <div class="centerBox">
      <h1>欢迎使用宿舍管理系统{{ a }}</h1>
      <!--
        ref：相当于html中的标签的id属性，和Vue3中的ref函数是不同东西
      -->
      <el-form ref="loginFormRef" :model="form" :rules="rules">
        <!--prop中的值必须和form表单中的属性名一致，否则在自定义验证规则时会获取不到值-->
        <el-form-item label="" prop="account">
          <el-input v-model="form.account" placeholder="账号"/>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码"/>
        </el-form-item>
        <el-form-item label="" prop="role">
          <el-radio-group v-model="form.role">
            <el-radio label="0" model-value="0" value="0">系统管理员</el-radio>
            <el-radio label="1" model-value="1">宿舍管理员</el-radio>
            <el-radio label="2" model-value="2">学生</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox label="记住密码" v-model="form.rem" name="type"/>
        </el-form-item>

        <el-form-item label="">
          <el-button @click="onLogin(loginFormRef)" class="loginBtn" type="primary">登录</el-button>
        </el-form-item>
        <el-form-item label="" class="btns">
          <el-button class="item" type="default">注册</el-button>
          <el-button class="item" type="default">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from 'vue'
import { useRouter, useRoute } from 'vue-router'
/*
  reactive：针对引用数据类型的响应式数据，响应式数据即数据变化时，页面也会变化的数据
  ref：针对基本数据类型的响应式数据，原则上也可以支持引用数据类型，ref一定是地址发生变化才会响应更新
 */

/*
  rule：当前使用验证规则对象
  value：被验证的数据
  callback：回调函数，
    通过：callback()
    不通过：callback(new Error("错误提示信息"))
 */
const roleCheck = (rule, value, callback) => {
  console.log(rule, value)
  if (["0", "1", "2"].includes(value)) {
    return callback();
  } else {
    return callback(new Error("请选择登录的身份"))
  }
}
export default {
  name: "LoginView",
  // 组合式api使用
  setup() {
    let a = 10; //不是响应式数据
    // 创建响应式对象数据
    let form = reactive({
      account: '',
      password: '',
      role: '1',
      rem: true
    })
    let rules = reactive({
      account: [
        {required: true, message: '账号不能为空', trigger: 'blur'},
        {min: 3, max: 10, message: '长度在 3 到 10 之间', trigger: 'blur'},
      ],
      password: [
        {required: true, message: '密码不能为空', trigger: 'blur'},
        {min: 3, max: 10, message: '长度在 3 到 10 之间', trigger: 'blur'},
      ],
      role: [
        {validator: roleCheck, trigger: 'change'},
      ],
    })

    // 创建ref变量
    let loginFormRef = ref();
    console.log("loginFormRef", loginFormRef);
    // 获取路由对象
    const router = useRouter();
    function onLogin(form) {
      // 获取表单，然后再次验证表单
      // console.log(this.$refs.loginFormRef)
      // this.$refs：在setup()中，或者说组合api，是不没有this关键
      form.validate((valid, fields) => {
        // valid：boolean，表示是否通过验证
        if (valid) {
          /**
           * 发起登录请求，由服务器去验证账号密码
           *  服务器验证通过
           *    是否记住密码
           *    跳转页面
           *    其它事情
           *  服务器验证不通过，弹出框提示
           */
          router.push({
            path: '/home'
          })
        }
      })
    }

    // 如果数据需要在页面上使用，必须在下面的return语句中添加
    return {
      a, form, rules, onLogin, loginFormRef
    }
  },
}
</script>

<!--
  scoped：表示样式只能在该vue文件中使用
-->
<style scoped lang="scss">
.loginBox {
  width: 100%;
  height: 100%;
  background-color: red;
  display: flex; /*弹性盒子*/
  justify-content: center; /*水平居中*/
  align-items: center; //垂直居中
  background-image: url("../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.centerBox {
  width: 500px;
  //height: 500px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  opacity: 0.7;

  h1 {
    text-align: center;
  }

  //样式穿透
  :deep .el-form-item__content {
    justify-content: center;
  }
}

.loginBtn {
  //display: block;
  width: 100%;
}

.btns {
  display: flex;

  .item {
    flex: 1;
  }
}
</style>